<template>
    <div class="permission-management-page">
        <!-- 工具栏 -->
        <div class="toolbar">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8">
                    <el-input v-model="searchQuery" placeholder="请输入权限名称搜索" clearable class="search-input">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-col>

                <el-col :xs="24" :sm="12" :md="16" class="actions">
                    <el-button type="primary" @click="handleCreatePermission">创建权限</el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 权限列表表格 -->
        <el-table :data="paginatedPermissions" border stripe style="width: 100%">
            <el-table-column label="权限名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作" align="center" width="200">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="filteredPermissions.length"
            background layout="prev, pager, next, total" @current-change="handlePageChange" />

        <!-- 创建/编辑权限对话框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
            <el-form :model="currentPermission" ref="permissionForm" label-width="100px" :rules="rules">
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="currentPermission.name" placeholder="请输入权限名称" />
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="currentPermission.description" placeholder="请输入权限描述" />
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSavePermission">保存</el-button>
            </span>
        </el-dialog>

        <!-- 删除确认弹窗 -->
        <el-dialog v-model="deleteDialogVisible" title="确认删除" width="400px">
            <p>确定要删除权限 <strong>{{ currentPermission.name }}</strong> 吗？</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取消</el-button>
                <el-button type="danger" @click="handleDelete">删除</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import { ElIcon, ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

// 状态管理
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const dialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const dialogTitle = ref('创建权限');
const currentPermission = ref({
    id: null,
    name: '',
    description: '',
});
const permissions = ref([]);
const fetchPremissionListData = () => {
    //模拟列表数据请求
    const data = [
        { id: 1, name: '查看用户', description: '允许用户查看用户列表' },
        { id: 2, name: '编辑用户', description: '允许用户编辑用户信息' },
        { id: 3, name: '删除用户', description: '允许用户删除用户' },
        { id: 4, name: '管理系统设置', description: '允许用户修改系统配置' },
    ]
    permissions.value = data;
}

// 验证规则
const rules = {
    name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
};

// 搜索过滤
const filteredPermissions = computed(() => {
    const query = searchQuery.value.trim().toLowerCase();
    return permissions.value.filter(
        permission =>
            permission.name.toLowerCase().includes(query) ||
            permission.description.toLowerCase().includes(query)
    );
});

// 分页数据
const paginatedPermissions = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredPermissions.value.slice(start, end);
});

// 新建权限
const handleCreatePermission = () => {
    currentPermission.value = { id: null, name: '', description: '' };
    dialogTitle.value = '创建权限';
    dialogVisible.value = true;
};

// 编辑权限
const handleEdit = permission => {
    currentPermission.value = { ...permission };
    dialogTitle.value = '编辑权限';
    dialogVisible.value = true;
};

// 删除权限确认
const confirmDelete = permission => {
    currentPermission.value = { ...permission };
    deleteDialogVisible.value = true;
};

// 删除权限
const handleDelete = () => {
    const index = permissions.value.findIndex(p => p.id === currentPermission.value.id);
    //模拟删除请求
    if (index !== -1) {
        permissions.value.splice(index, 1);
        ElMessage.success('权限已删除');
    }
    deleteDialogVisible.value = false;
};

// 保存权限
const handleSavePermission = () => {
    const { id, name, description } = currentPermission.value;
    if (!name) {
        ElMessage.error('请输入权限名称');
        return;
    }

    if (id) {
        // 更新权限
        const index = permissions.value.findIndex(p => p.id === id);
        if (index !== -1) {
            permissions.value[index] = { ...currentPermission.value };
            //模拟更新请求
            ElMessage.success('权限已更新');
        }
    } else {
        // 创建新权限
        const newPermission = { ...currentPermission.value, id: Date.now() };
        permissions.value.push(newPermission);
        //模拟添加请求
        ElMessage.success('权限已创建');
    }
    dialogVisible.value = false; // 关闭对话框
};

// 分页切换
const handlePageChange = page => {
    currentPage.value = page;
};

onMounted(() => {
    fetchPremissionListData();
});
</script>

<style scoped>
.permission-management-page {
    padding: 20px;
}

.toolbar {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.el-table {
    margin-bottom: 20px;
}

.dialog-footer {
    text-align: right;
}
</style>
